<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
		<script src="js/lib/jquery-2.1.1.min.js"></script>
		<script src="js/lib/Mes.js"></script>
		<script src="js/lib/mui.min.js"></script>
		<script src="js/config.js"></script>
		<script src="js/lib/base64.min.js"></script>
		<script src="js/index.js"></script>
		<style type="text/css">
			span {
				background: linear-gradient(to right, red, blue);
				-webkit-background-clip: text;
				color: transparent;
			}


			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}

			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}

			.mui-title {
				font-weight: bold;
				color: aliceblue;
			}

			.mui-bar-transparent {
				background-color: rgba(47, 64, 86, .99);
			}
		</style>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">
			<h2 class="mui-title" style="">LOGIN</h2>
		</header>
		<div class="mui-content">

			<div class="register-box">
				<div style="margin:30px auto;width:100px;height:100px;border-radius:100px;overflow:hidden">
					<img src="img/1024x1024.png" style="margin:0;width:100%;height:100%;">
				</div>
				<!-- <h1><span>华丝美现场操作系统</span></h1>
				<h1><span>1.1.0</span></h1> -->
				<!--睁睁logo-->
				<!-- <label style="font-weight: bold;">用户名</label> -->

				<input type="text" class="mui-input-clear" placeholder="User" id="UserNO" maxlength="11">
				<!--<input type="text"  id="imgtalk" maxlength="11"> -->
				<!-- <label style="font-weight: bold;">密&nbsp;&nbsp;&nbsp;码</label> -->
				<input type="password" class="mui-input-password" placeholder="Password" id="Pwd">
				<button class="btn-register" style="background-color:#007AFF;" id="loginLoader"
					onclick="CheckLogin()">LOGIN</button>
				<br />
				<label style="font-size: 14px;
	margin-top: 9px; color: #808080; font-size: 14px;">Remember me:</label>
				<input type="checkbox" id="remember" checked>
			</div>

		</div>
		<div style="float:right;">
			<button id="test" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">Server Setting</button>
		</div>

		<div id="popover" class="mui-popover" style="padding:10px; margin-left:15px;">
			<div class="mui-popover-arrow"></div>
			<br />
			<label>Server:</label>
			<br />
			<input type="text" class="mui-input-clear" placeholder="" id="ServerHttp" name="ServerHttp" value="">
			<br />
			<p><button onclick="clickCounter()" type="button">Add</button></p>
		</div>

		</div>
		</div>
		<script type="text/javascript">
			document.getElementById("test").addEventListener("tap", function() {
				//调用隐藏/显示弹出层
				mui("#popover").popover('toggle', document.getElementById("div"));
			})
			var UserNO = document.getElementById('UserNO'), //用户名
				Pwd = document.getElementById('Pwd'), //密码
				rem = document.getElementById('remember'),
				localUser = localStorage.getItem('UserNO') || ''; //获取到user的值并保存
			localPass = localStorage.getItem('Pwd') || ''; //获取到pwd的值并保存
			UserNO.value = localUser;

			Pwd.value = localPass;

			(function(doc, win) {
				var docEl = doc.documentElement;
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
				recalc = function() {
					var clientWidth = docEl.clientWidth;
					if (!clientWidth) return;
					docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
				};
				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			}(document, window));



			var lastname = "";
			var str;
			//保存记录
			function clickCounter() {
				if (typeof(Storage) !== "undefined") {
					if ($("#ServerHttp").val() != null && $("#ServerHttp").val() != "") {
						localStorage.setItem("ServerHttp", $("#ServerHttp").val());
						//调用隐藏/显示弹出层
						mui("#popover").popover('toggle', document.getElementById("div"));
						mui.toast("success ", {
							duration: '1000',
							type: 'div'
						});
					}
					if (lastname.length - 1 > 0) {
						$("#allSTK").html(""); //全部清空
						for (var i = 0; i < lastname.length - 1; i++) {
							//		$("#allSTK").append( "<button onclick="Obtained('+"'"+SSS+"'"+')">" + lastname[i] + "</button>");	
							$("#allSTK").append('<button   id=' + [i] + '   name=' + [i] + ' value=' + lastname[i] +
								'  onclick="Obtained(this.value)"  >' + lastname[i] + '</button>');
						}
					}
				} else {
					document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
				}
			}

			//查询
			function select() {
				lastname = localStorage.getItem("key");
				lastname = lastname.split(",");
				$("#allSTK").html(""); //全部清空
				for (var i = 0; i < lastname.length - 1; i++) {
					$("#allSTK").append("<button  >" + lastname[i] + "</button>");
				}
			}

			//清空
			function deleteTwo() {
				localStorage.setItem("key", "");
				lastname = localStorage.getItem("key");
				lastname = lastname.split(",");
				$("#allSTK").html(""); //全部清空
				for (var i = 0; i < lastname.length - 1; i++) {
					$("#allSTK").append("<button  >" + lastname[i] + "</button>");
				}
			}

			//获取
			function Obtained(i) {
				$("#ServerHttp").val(i);
				//alert(i);
			}
		</script>


	</body>
</html>